<%--
  Created by IntelliJ IDEA.
  User: yangwu
  Date: 2021/8/30
  Time: 17:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/statics/css/bootstrap.css" />
</head>
<body>
    <div class="container-fluid" style="margin-top: 50px;">
        <!--表单  搜索-->
        <div class="row">
            <div class="col-md-6">
                <span style="font-size: 30px">销售信息查询:</span>
            </div>
            <div class="col-md-6">
                <!--写表单-->
                <form class="form-inline" id="searchForm" action="/sale/list">
                    <input type="hidden" name="pageNo" value="1" id="pageNo">
                    <!--表示这个是一个表单项-->
                    <div class="form-group">
                        <label for="order">排序方式:</label>
                        <select name="order" id="order" class="form-control">
                            <option value="saleDate desc">销售日期</option>
                            <option value="totalPrice desc">单笔总价</option>
                        </select>
                    </div>
                    <button id="searchCondition" type="button" class="btn btn-success">提交</button>
                </form>
            </div>
        </div>
        <div class="row" style="height: 10px;"></div>
        <!--表格  数据显示-->
        <div class="row" style="margin-left: 5px;">
            <div class="col-md-12">
                <table class="table table-hover table-bordered text-center" style=" margin-bottom: 0px;">
                    <tr class="info" style="">
                        <td>ID</td>
                        <td>商品</td>
                        <td>单价</td>
                        <td>数量</td>
                        <td>总价</td>
                        <td>销售日期</td>
                        <td>销售员</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row " style="margin-left: 5px; ">
            <div class="col-md-12 ">
                <table class="table table-hover table-striped text-center " >
                    <tbody id="saleContent">

                    </tbody>
                </table>
            </div>
        </div>
        <!--分页-->
        <div class="row">
            <div class="col-sm-4 col-sm-offset-4">
                <div class="btn-group" role="group " aria-label="... " id="page">

                </div>
            </div>
        </div>
    </div>
    <!--引入JavaScript的支持-->
    <script src="/statics/js/jquery-2.1.0.min.js"></script>
    <script>
        loadSaleList();
        $("#searchCondition").click(function (){
            loadSaleList();
        })
        function loadSaleList(){
            $.ajax({
                url:"/sale/list",
                data:{order:$("#order").val(),pageNo:$("#pageNo").val()},
                success:function (data){
                    $("#saleContent tr").remove()
                    console.log(data);
                    var sales=data.list;
                    trs="";
                    for(var i=0;i<sales.length;i++){
                        trs+="<tr>";
                        trs+="<td>"+sales[i].id+"</td>";
                        trs+="<td>"+sales[i].product.productName+"</td>";
                        trs+="<td>"+sales[i].price+"</td>";
                        trs+="<td>"+sales[i].quantity+"</td>";
                        trs+="<td>"+sales[i].totalPrice+"</td>";
                        trs+="<td>"+sales[i].saleDate+"</td>";
                        trs+="<td>"+sales[i].user.userName+"</td>";
                        trs+="</tr>";
                    }
                    $("#saleContent").append(trs);

                    //生成分页按钮
                    $("#page button").remove();
                    var pages = "";
                    if(data.pageNum > 1){
                        pages += '<button type="button" class="btn btn-default" onclick="nav_page(1)">首页</button>';
                        pages += '<button type="button" class="btn btn-default" onclick="nav_page('+(data.pageNum-1)+')">上一页</button>';
                    }
                    if(data.pageNum < data.pages){ //当前页小于最大也
                        pages += '<button type="button" class="btn btn-default" onclick="nav_page('+(data.pageNum+1)+')">下一页</button>';
                        pages += '<button type="button" class="btn btn-default" onclick="nav_page('+data.pages+')">尾页</button>';
                    }
                    $("#page").append(pages);
                }
            })
        }
        function nav_page(pageNo){
            $("#pageNo").val(pageNo);
            loadSaleList();
        }
    </script>
</body>
</html>
